<script setup>
import plbox from "./plbox.vue"
import {useRoute,useRouter} from "vue-router"
import {onMounted,getCurrentInstance,reactive,ref} from "vue"
let router=useRouter()

let a=useRoute()
let {proxy}=getCurrentInstance()
let obj=ref({})
console.log(a.query)
onMounted(async()=>{
  let res=await proxy.$axios("/xqydata",{params:{id:a.query.id}})
  console.log(res.data)
   obj.value=res.data
})
let value=ref(null)

let plarr=ref([])
// 获取评论信息
onMounted(async()=>{
    
    let res=await proxy.$axios("getopinion",{params:{gid:a.query.id}})
    console.log(res.data)
    plarr.value=res.data
})

// 输入评论的弹窗
let isShow=ref(false)
let msg=ref("")
let fn=()=>{
  let token=localStorage.getItem("token")
  if(!token){
     if(confirm("未登录，是否去登录")){
                // window.open("/public/view/login/index.html")
    router.push({path:`/cll/login`})

            }
  }else{
  isShow.value=true
  }
}
let fn1=()=>{
  isShow.value=false
}
let sub=async()=>{
  let res=await proxy.$axios("publish",{params:{gid:a.query.id,opinion:msg.value}})
  alert(res.data.info)
  // console.log(res.data)
  window.location.reload()

}
</script>

<template>
    <div>
     <span class="title1">{{obj.title}}</span>

   <div class="des">
     <img :src="suburl+obj.img" alt="">
      <div><span>表演者：</span><span class="name1">{{obj.name}}</span><br>
      <span>流派:</span><span class="name2">{{obj.lp}}</span><br>
      <span>专辑类型:</span><span class="name2">{{obj.zjlx}}</span><br>
      <span>介质:</span><span class="name2">{{obj.jz}}</span><br>
      <span>发行时间:</span><span class="name2">{{obj.fxsj}}</span><br>
      <span>出版者:</span><span class="name2">{{obj.cb}}</span>
      </div>
   </div>
   <div class="pjbox">
   <p class="pj">评价：</p>
   <el-rate
  v-model="value"
  show-text  class="elz">
</el-rate>
</div><br>

<p  class="xdp" @click="fn">写短评</p><br>

<div>
  <i class="el-icon-edit"></i>
<!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
</div>




      <h2>简介</h2>
      <p class="desp">  {{obj.desc}}</p>

      <h2>短评</h2>

      <plbox v-for="el in plarr" :key="el.oid" :plobj="el"></plbox>

    <div class="xplbox" v-show="isShow">
      
      <p>简短评论</p> <button @click="fn1" class="close">x</button>
  <!-- <input type="text" name="" id="xpl"> -->
  <textarea name="" id="" cols="30" rows="10" autofocus v-model="msg"></textarea>
  <button @click="sub">发表</button>
    </div>
     

    </div>
    
</template>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
}
.xplbox{
  position: fixed;
  left: 30%;
  top: 30%;
  width: 500px;
  height: 170px;
  border: 2px solid orangered;
  .close{
    position: absolute;
    top: 0;
    right: 0;
  }
  #icon{
    width: 20px;
  }
  textarea{
    // font-family: inherit;
    // font-size: inherit;
    // font-style: inherit;
    // font-weight: inherit;
    border: 1px solid #ccc;
    padding: 3px;
    width: 480px;
    height: 110px;
  }
  button{
    float: right;
  }
}
.des{
  display: flex;
  img{
    width: 135px;
    height: 135px;
  }
  span{
    font-size: 13px;
    color: #666666;
    margin-bottom: 3px;
    display: inline-block;
    
  }
  .name1{
    color: #3377aa;
  }
  .name2{
    color: black;
  }
}
.title1{
  font-size: 26px;
  color: #494949;
  font-weight: bold;
}
.box{
  width: 100px;
  height: 100px;
  background-color: red;
}
.pj{
  font-size: 15px;
  color: #000000;
  position: absolute;
  top:8px
}
.elz{
  // margin-top: 50px;
  position: absolute;
  top:7px;
  left: 37px;
}
.pjbox{
  // display: flex;
  position: relative;
  width: 500px;
  height: 30px;
  
}
.xdp{
  cursor: pointer;
}
h2{
  color: #007722;
  font-size: 16px;
}
.el-icon-edit{
  width: 20px;
  height: 20px;
}
.desp{
  width: 300px;
}
</style>
